<template>
	<view class="container">
		<view class="backBox">
			<image src="../../static/back.svg" @click="goBack"></image>
		</view>
		<view class="imgBox">
			<image src="../../static/mood8.gif"></image>
		</view>
		<view class="inputBox">
			<wd-input v-model="username" prefix-icon="user" placeholder="请输入账户" clearable @change="handleChange"></wd-input>
		</view>
		<view class="inputBox">
			<wd-input v-model="password" prefix-icon="keywords" placeholder="请输入密码" clearable show-password @change="handleChange"/>
		</view>
		<view class="inputBox">
			<wd-input v-model="passwordAgin" prefix-icon="keywords" placeholder="请再次输入密码" clearable show-password @change="handleChange"/>
		</view>
		<button class="btn">注册</button>
	</view>
</template>

<script lang="ts" setup>
	import {ref} from 'vue'
	const username = ref<string>('')
	const password = ref<string>('')
	const passwordAgin = ref<string>('')
	function handleChange(event) {
	  console.log(event)
	}
	const goBack = () =>{
		uni.navigateTo({
			url:"/pages/home/home"
		})
	}
</script>

<style lang="scss" scoped>
	.container{
		background-color:#fff2bd;
		width: 100vw;
		height: 100vh;
		display: flex;
		align-items: center;
		flex-direction: column;
		.backBox{
			image{
				width: 100rpx;
				height: 100rpx;
				position: absolute;
				z-index: 2;
				top: 25rpx;
				left: 20rpx;
			}
		}
		.inputBox{
			margin-bottom: 25rpx;
		}
		:deep(.wd-input){
			width: 500rpx !important;
			background-color: #ffeca2 !important;
			padding: 15rpx;
			padding-left: 25rpx;
			border-radius: 50rpx !important;
		}
		:deep(.wd-input__icon){
			background-color: unset;
			color: #85784b;
		}
		:deep(.wd-input__clear){
			background-color: unset;
		}
		.imgBox{
			border: #fade5f 4px solid;
			border-radius: 125rpx;
			margin-top: 220rpx;
			margin-bottom: 40rpx;
			image{
				width: 250rpx;
				height: 250rpx;
			}
			
		}
		.btn{
			background-color: #fcde63;
			border-radius: 30rpx;
			width: 400rpx;
			margin-top: 200rpx;
		}
	}       
</style>

